<template>
    <div class="cate_card" v-for="(item,index) in data">
        <img :src="`http://101.132.181.9/api/${item.product_picture}`" alt="">
        <div class="title">{{item.product_name}}</div>
        <div class="text">{{item.product_title}}</div>
        <div class="price">
            <span class="left">{{item.product_selling_price}}元</span>
            <span class="right" v-show="item.product_selling_price != item.product_price">{{item.product_price}}元</span>
        </div>
    </div>

</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    data:{
        required:true,
        type:Array,
        default:()=>[]
    }
})

</script>
<style lang="scss" scoped>
    .cate_card{    
        background: #fff;
        width: 24%;
        height:48%;
        padding: 10px;
        text-align: center;
        line-height: 26px;
        img{
            width: 70%;
            margin-bottom: 24px;
        }
        .title{
            font-size: 14px;
        }
        .text{
            font-size: 14px;
            color: #777;
        }
        .price{
            font-size: 16px;
            .left{
                color: orangered;
            }
            .right{
                color: #777;
                text-decoration: line-through;
                margin-left: 10px;
            }
        }
    }
    .cate_card:hover{
        box-shadow: 0 0 10px #777;
        transform: scale(1.05);
    }
</style>